<script lang="ts" setup>
import type { DataFormOptionsProps } from '#/components/data-form/types';

import { computed, nextTick, ref } from 'vue';

import { VIcon } from '@croco/framework/icons';
import { $t } from '@croco/framework/locales';

import { service } from '#/api/request';
import { Cron } from '#/components/cron';
import { DataForm } from '#/components/data-form';

import { useForm } from './data';

const props = defineProps<{
    enums: Record<string, any>;
}>();

const dataFormRef = ref<InstanceType<typeof DataForm>>();
const openCron = ref(false);
const tasks = ref<{ [key: string]: any[] }>({});

const { fields, rules, isChangeStatus } = useForm();

const open = (options: DataFormOptionsProps) => {
    // 打开弹窗
    dataFormRef.value?.open(options);
    nextTick(() => {
        service.get('/job/service').then(({ data }) => {
            Object.keys(data).forEach((item) => {
                const ms: any[] = [];
                Object.entries(data[item]).forEach(([method, params]) => {
                    ms.push({ label: method, value: method, params });
                });
                tasks.value[item] = ms;
            });
        });
    });
};

const tip = computed(() => {
    let text = '';
    for (const item of props.enums.misfirePolicy) {
        text += `${text.length > 0 ? '<br>' : ''}${item.label}: ${item.remark}`;
    }
    return text;
});
defineExpose({ open });
</script>

<template>
    <DataForm ref="dataFormRef" :fields="fields" :rules="rules" api="/job" title="定时任务" width="75vh">
        <template #name="{ form }">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="名称" prop="name">
                        <el-input v-model="form.name" placeholder="请输入名称" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="分组名称" prop="groupName">
                        <el-select v-model="form.groupName">
                            <el-option v-for="(item, index) in enums.groupName" :key="index" :label="item.label" :value="item.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
        </template>
        <template #cronExpression="{ form }">
            <Cron v-model="form.cronExpression" />
        </template>
        <template #beanName="{ form }">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="服务名称" prop="beanName">
                        <el-select v-model="form.beanName" clearable>
                            <el-option v-for="item in Object.keys(tasks)" :key="item" :label="item" :value="item" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="函数名称" prop="methodName">
                        <el-select v-model="form.methodName" :disabled="!form.beanName">
                            <el-option v-for="item in tasks[form.beanName]" :key="item.value" :label="item.label" :value="item.value">
                                <span style="float: left">{{ item.label }}</span>
                                <span style="float: right; color: var(--el-text-color-secondary); font-size: 13px"> {{ item.params.length }}个参数 </span>
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
        </template>
        <template #params="{ form }">
            <el-form-item label="运行参数" prop="params" :required="tasks[form.beanName]?.find((item) => item.value === form.methodName)?.params?.length > 0">
                <el-input
                    v-model="form.params"
                    :placeholder="tasks[form.beanName]?.find((item) => item.value === form.methodName)?.params.join(', ')"
                    resize="none"
                    type="textarea"
                    :rows="5"
                    clearable
                />
                <template #error>
                    <div class="el-form-item__error">{{ $t('ui.formRules.required') }}</div>
                </template>
            </el-form-item>
        </template>
        <template #misfirePolicy="{ form }">
            <el-row>
                <el-col :span="8">
                    <el-form-item prop="misfirePolicy">
                        <template #label>
                            <span class="flex-center">
                                执行策略
                                <el-tooltip :content="tip" raw-content>
                                    <VIcon icon="icon:question-filled" />
                                </el-tooltip>
                            </span>
                        </template>
                        <el-select v-model="form.misfirePolicy">
                            <el-option v-for="(item, index) in enums.misfirePolicy" :key="index" :label="item.label" :value="item.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="并发执行" prop="concurrent">
                        <el-select v-model="form.concurrent">
                            <el-option v-for="(item, index) in enums.concurrent" :key="index" :label="item.label" :value="item.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="状态" prop="status">
                        <el-select v-model="form.status" :disabled="!isChangeStatus">
                            <el-option v-for="(item, index) in enums.status" :key="index" :label="item.label" :value="item.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
        </template>
    </DataForm>

    <el-dialog title="Cron表达式生成器" v-model="openCron" append-to-body destroy-on-close>
        <Cron @hide="openCron = false" />
    </el-dialog>
</template>
